<template>
  <div class="ai-dialogue">
    <h2>AI 对话助手</h2>
    <div class="chat-container">
      <div v-for="(message, index) in messages" :key="index" class="chat-message" :class="message.type">
        <p>{{ message.content }}</p>
      </div>
    </div>
    <div class="input-container">
      <el-input
          v-model="userInput"
          placeholder="输入你的问题..."
          @keyup.enter="sendMessage"
      />
      <el-button type="primary" @click="sendMessage">发送</el-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { BASE_URL } from '@/config';
import axios from "axios";

export default {
  setup() {
    const messages = ref([
      { type: 'ai', content: '你好，我是 AI 智能助手，请问有什么可以帮您？' },
    ]);
    const userInput = ref('');

    const sendMessage = async () => {
      if (!userInput.value.trim()) {
        console.log('用户输入为空，未发送请求');
        return;
      }

      // 添加用户消息到对话中
      messages.value.push({ type: 'user', content: userInput.value });
      console.log('用户输入的消息:', userInput.value);

      try {
        // 调用模拟 AI 响应（实际应为后端 API 调用）
        const response = await simulateAIResponse(userInput.value);
        console.log('AI 回复:', response); // 打印 AI 的实际回复
        messages.value.push({ type: 'ai', content: response }); // 正确添加到气泡
      } catch (error) {
        console.error('请求出错:', error.response || error.message); // 打印错误详细信息
        messages.value.push({ type: 'ai', content: 'AI 无法处理您的请求，请稍后再试。' });
      } finally {
        userInput.value = ''; // 清空输入框
      }
    };


    const simulateAIResponse = async (input) => {
      console.log('即将发送到后端的消息:', input);

      try {
        const response = await axios.post(`${BASE_URL}/ai/ask`, { s: input });
        console.log('后端返回的完整响应:', response.data);

        // 提取 data 字段作为 AI 回复
        const aiResponse = response.data.data; // data 是字符串
        console.log('AI 回复:', aiResponse); // 打印实际 AI 回复

        return aiResponse; // 返回字符串形式的回复
      } catch (error) {
        console.error('向后端发送请求时出错:', error.response || error.message);
        throw error; // 抛出错误以便外层捕获
      }
    };




    return {
      messages,
      userInput,
      sendMessage,
    };
  },
};
</script>

<style scoped>
.ai-dialogue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #74ebd5, #acb6e5); /* 背景渐变 */
  font-family: 'Arial', sans-serif;
}

.chat-container {
  width: 100%;
  max-width: 600px; /* 减小聊天窗口宽度 */
  max-height: 500px; /* 减小聊天窗口高度 */
  overflow-y: auto;
  background: #ffffff;
  border-radius: 12px; /* 较小的圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 较轻的阴影 */
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 减小气泡之间的间距 */
}

.chat-message {
  display: flex;
  align-items: flex-start;
  padding: 0px 12px; /* 减小气泡内边距 */
  border-radius: 12px;
  font-size: 16px; /* 调整字体大小 */
  line-height: 1.0; /* 调整行高 */
  max-width: 80%; /* 限制气泡最大宽度 */
  word-wrap: break-word;
}

.chat-message.user {
  align-self: flex-end;
  background: linear-gradient(153deg, #b0f3f1, #5d9cec);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 较小的阴影 */
}

.chat-message.ai {
  align-self: flex-start;
  background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 较小的阴影 */
}

.input-container {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.input-container .el-input {
  flex: 1;
  border-radius: 12px;
  padding: 8px; /* 适当的内边距 */
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 较小的阴影 */
}

.input-container .el-button {
  flex-shrink: 0;
  border-radius: 12px;
  padding: 8px 15px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 较小的阴影 */
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}
</style>
